<template>
	<view class="pay-popup">
		<view v-if="showType=='cell'" class="column">
			<view class="cell_content column" v-if="paymentList.length>0">
				<text class="bold fs30">支付方式</text>
				<view class="column ">
					<view class="pay_list">
						<view class="pay_item align-center justify-between" v-for="item in paymentList" :key="item.code"
							@click="onChangeItem(item)">
							<view class="align-center fs24">
								<u-image :src="item.icon" width="80rpx" height="80rpx" />
								<text class="ml10 bold fs28">{{item.name}}</text>
							</view>
							<view class="check centerV" :class="{check_active:paymentData.payment_type==item.type?true:false}">
								<u-icon name="checkmark" :color="paymentData.payment_type==item.type?'#fff':'rgba(0,0,0,0)'"
									size="30rpx" bold :customStyle="{transition:'.3s'}" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="column" v-else>
			<u-popup :show="show" round="20rpx" :closeOnClickOverlay="false" mode="center" :safeAreaInsetBottom="false"
				:closeable="true" @close="emits('cancel',false)">
				<view class="popup_content column">
					<text class="bold center fs30">请选择支付方式</text>
					<view class="column mt30">
						<view class="pay_list">
							<view class="pay_item align-center justify-between" v-for="item in paymentList" :key="item.code"
								@click="onChangeItem(item)">
								<view class="align-center fs24">
									<u-image :src="item.icon" width="80rpx" height="80rpx" />
									<text class="ml10">{{item.name}}</text>
								</view>
								<view class="check centerV" :class="{check_active:paymentData.payment_type==item.type?true:false}">
									<u-icon name="checkmark" :color="paymentData.payment_type==item.type?'#fff':'rgba(0,0,0,0)'"
										size="30rpx" bold :customStyle="{transition:'.3s'}" />
								</view>
							</view>
						</view>
					</view>
					<view class="align-center mt30">
						<u-button text="取消" plain type="primary" shape="circle" :customStyle="{marginRight:'10rpx'}"
							@click="emits('cancel',false)" />
						<u-button text="确定" type="primary" shape="circle" :customStyle="{marginLeft:'10rpx'}"
							@click="emits('confirm',paymentData)" />
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		showToast
	} from '@/core/app';
	import {
		getPayList,
	} from "@/api/pay.js";
	// 参数
	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		},
		showType: {
			type: String,
			default: 'cell'
		}
	})
	// 事件
	const emits = defineEmits(['cancel', 'confirm'])
	onMounted(() => {
		getPaymentList()
	})
	// 支付列表
	const paymentList = ref([])
	const paymentData = ref({
		payment_code: '',
		payment_type: 'wxpay'
	})
	const getPaymentList = async () => {
		let res = await getPayList({
			// #ifdef MP-WEIXIN
			type: 'applet'
			// #endif
			// #ifdef APP
			type: 'app'
			// #endif
			// #ifdef H5
			type: 'alipay_applet'
			// #endif
		})
		if (res) {
			paymentList.value = res.data.map(item => {
				if (item.type == 'alipay_applet') item.type = 'wxpay'
				return item
			})
			if (paymentList.value.length > 0) {
				const {
					code,
					type
				} = paymentList.value[0]
				paymentData.value = {
					payment_code: code,
					payment_type: type
				}
			}
		}
	}
	// 选择支付
	const onChangeItem = (data) => {
		paymentData.value = {
			payment_code: data.code,
			payment_type: data.type
		}
	}
	defineExpose({
		name: 'pay-popup',
		paymentData
	})
</script>

<style lang="scss">
	.pay-popup {
		margin: 20rpx 0;

		.popup_content {
			width: 500rpx;
			background: #fff;
			padding: 30rpx;
			border-radius: 20rpx;

			.pay_item {
				margin-bottom: 20rpx;

				.check {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					border: 1px solid #efefef;
					transition: .3s;

					&_active {
						background: #3f79eb;
						border: 1px solid #3f79eb;
					}
				}
			}
		}

		.cell_content {
			padding: 20rpx;
			border-radius: 20rpx;
			background: #fff;

			.pay_item {
				margin-top: 20rpx;

				.check {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					border: 1px solid #efefef;
					transition: .3s;

					&_active {
						background: #3f79eb;
						border: 1px solid #3f79eb;
					}
				}
			}
		}
	}
</style>